import { View, Image } from '@tarojs/components';
import Title from '@/components/Title';
import './index.scss';

interface ListItem {
  id: number | string;
  icon_url: string;
  b_name: string;
}
interface IProps {
  title: string;
  subTitle: string;
  list: ListItem[];
  onHandle?: (id: number | string) => void;
}

export default function ({ title, subTitle, list = [], onHandle = () => {} }: IProps) {
  return (
    <View className="category-section">
      <Title title={title} subTitle={subTitle} />
      <View className="category-list">
        {list.map((item) => {
          return (
            <View key={item.id} className="category-item" onClick={() => onHandle(item.id)}>
              <Image src={item.icon_url} />
              <View>{item.b_name}</View>
            </View>
          );
        })}
      </View>
    </View>
  );
}
